<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style type="text/css">
    [v-cloak]{
        display: none
    }
</style>
<div id="app" v-cloak>
    <template v-if="type==='name'">
        <label>username:</label>
        <input placeholder="input username">
    </template>

    <template v-else>
        <label>email:</label>
        <input placeholder="input email">
    </template>
    <button @click="handleToggleClick">toggle input</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      type: 'name'
    },
      methods:{
          handleToggleClick:function (){
              this.type=this.type==='name'?'mail':'name';
          }
      }
  })
</script>
</body>
</html>